<html>
  <head>
    <title>Lesson07 - React第七课之条件渲染</title>
  </head>
  <body>
    <div id="app"></div>

    
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
      const appDom = document.getElementById('app');
      
      function UserGreeting(props) {
        return <h1>欢迎登录</h1>
      }

      function GuestGreeting(props) {
        return <h1>请登录</h1>
      }

      function Greeting(props) {
        const { isLogined } = props;
        return isLogined ? <UserGreeting /> : <GuestGreeting />;
      }

      class IsLogined extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            isLogined: false
          }
        }

        handleClick = () => {
          this.setState(preState => ({
            isLogined: !preState.isLogined
          }));
        }
        render() {
          return (
            <div>
              <Greeting isLogined={this.state.isLogined} />
              <button onClick={this.handleClick}>{ !this.state.isLogined ? '登录': '登出' }</button>
            </div>
          );
        }
      }
      ReactDOM.render(<IsLogined/>, appDom);
    </script>
  </body>
</html>